<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="title"
    width="640px"
    @ok="onSave"
    okText="保存"
    :maskClosable="false"
  >
    <template #centerFooter>
      <!-- <a-button v-if="behavior === 'add'" danger @click="onSave(2)">保存并继续</a-button> -->
    </template>
    <div class="card">
      <BasicForm @register="registerForm1" class="form">
        <template #cateType="{ model, field }">
          <div class="cate-type">
            <div
              :class="['use', 'cell', model[field] === o.value ? 'active' : 'tacit']"
              v-for="o in proCategoryType"
              :key="o.value"
              @click="model[field] = o.value"
              >{{ o.label }}
            </div>
          </div>
        </template>
      </BasicForm>
    </div>
  </BasicDrawer>
</template>
<script>
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  import { proCategoryStatus, proCategoryType } from '@/api/ds';
  import { GET, POST, PUT } from '@/api/http.js';
  import { useMessage } from '@/hooks/web/useMessage';

  export default defineComponent({
    components: { BasicDrawer, BasicForm },
    emits: ['complete'],
    setup(_, { emit }) {
      const state = reactive({
        form: {},
        categoryId: '',
        title: '',
        behavior: '',
        proCategoryType,
      });
      const { createMessage } = useMessage();

      const [registerForm1, form1] = useForm({
        labelWidth: 100,
        baseColProps: { span: 24, style: { paddingRight: '36px' } },

        schemas: [
          {
            label: '商品类型',
            field: 'cateType',
            required: true,
            component: 'RadioGroup',
            slot: 'cateType',
          },

          {
            label: '商品分类',
            field: 'cateSubName',
            required: true,
            component: 'Input',
          },

          {
            label: '状态',
            field: 'status',
            required: true,
            component: 'RadioGroup',
            componentProps: {
              options: proCategoryStatus,
            },
          },
        ],
        showActionButtonGroup: false,
      });

      const recordRef = ref({});
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
        async ({ behavior, categoryId }) => {
          state.title =
            behavior === 'add' ? '新增分类' : behavior === 'edit' ? '编辑分类' : '分类详情';
          state.behavior = behavior;
          state.categoryId = categoryId;

          await init();
        },
      );

      async function init() {
        recordRef.value = {};

        await form1.resetFields();
        const initData = { status: 1 };

        if (state.behavior === 'edit') {
          try {
            setDrawerProps({ confirmLoading: true });

            const { categoryId } = state;
            recordRef.value = (await GET('/product/libCategoryStoreDetail', { categoryId })) ?? {};
          } finally {
            setDrawerProps({ confirmLoading: false });
          }
        }

        Object.assign(initData, recordRef.value);
        form1.setFieldsValue(initData);
      }

      async function onSave(type) {
        await form1.validate();
        const formData = form1.getFieldsValue();

        const data = { ...recordRef.value, ...formData };

        try {
          setDrawerProps({ confirmLoading: true });

          await (state.behavior === 'add'
            ? POST('/product/libCategoryStoreInsert', data)
            : PUT('/product/libCategoryStoreUpdate', data));

          if (type === 2) {
            init();
          } else {
            closeDrawer();
          }

          createMessage.success('分类信息已保存');
          emit('complete');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        ...toRefs(state),
        registerDrawer,
        registerForm1,
        onSave,
      };
    },
  });
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .form {
      padding: 24px 12px 0 0;
    }

    .cate-type {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      cursor: pointer;
      gap: 8px 12px;

      .cell {
        padding: 4px 20px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
      }

      .tacit {
        border: 1px solid #e0e5ec;
        color: #091f3d;
      }

      .active {
        border: 1px solid @primary-color;
        background-color: @primary-color;
        color: #fff;
      }
    }
  }
</style>
